<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>实验室助理工作管理系统</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/font.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/xadmin.css}">
    <!-- <link rel="stylesheet" href="./css/theme5.css"> -->
    <script type="text/javascript" th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/js/xadmin.js}"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">
            <div class="layui-form-item">
                <label for="studentNo" class="layui-form-label">
                    <span class="x-red">*</span>学号</label>
                <div class="layui-input-inline">
                    <input type="text" id="studentNo" name="studentNo" th:value="${student.studentNo}"
                           readonly="readonly" required="required" lay-verify="studentNo"
                           autocomplete="off"
                           class="layui-input"></div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="studentPwd" class="layui-form-label">
                    <span class="x-red">*</span>密码</label>
                <div class="layui-input-inline">
                    <input type="password" id="studentPwd" name="studentPwd" th:value="${student.studentPwd}"
                           required="required" lay-verify="studentPwd"
                           autocomplete="off"
                           class="layui-input"></div>
                <div class="layui-form-mid layui-word-aux">3到6个字符</div>
            </div>
            <div class="layui-form-item">
                <label for="L_repass" class="layui-form-label">
                    <span class="x-red">*</span>确认密码</label>
                <div class="layui-input-inline">
                    <input type="password" id="L_repass" name="repass" th:value="${student.studentPwd}"
                           required="required" lay-verify="repass"
                           autocomplete="off" class="layui-input"></div>
            </div>
            <input type="hidden" id="imgUrl" name="imgUrl" th:value="${student.imgUrl}" value="" lay-verify="imgUrl">
            <div class="layui-form-item">
                <label for="file" class="layui-form-label">
                    <span class="x-red">*</span>个人照片</label>
                <div class="layui-input-inline">
                    <input type="file" id="file" name="file" autocomplete="off"></div>
            </div>
            <div class="layui-form-item">
                <label for="studentName" class="layui-form-label">
                    <span class="x-red">*</span>姓名</label>
                <div class="layui-input-inline">
                    <input type="text" id="studentName" name="studentName" th:value="${student.studentName}"
                           required="required" lay-verify="studentName"
                           autocomplete="off"
                           class="layui-input"></div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="studentCollege" class="layui-form-label">
                    <span class="x-red">*</span>学院</label>
                <div class="layui-input-inline">
                    <input type="text" id="studentCollege" name="studentCollege" th:value="${student.studentCollege}"
                           required="required" lay-verify="studentCollege"
                           autocomplete="off"
                           class="layui-input"></div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="studentGrade" class="layui-form-label">
                    <span class="x-red">*</span>年级</label>
                <div class="layui-input-inline">
                    <input type="text" id="studentGrade" name="studentGrade" th:value="${student.studentGrade}"
                           required="required" lay-verify="studentGrade"
                           autocomplete="off"
                           class="layui-input"></div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="studentMajor" class="layui-form-label">
                    <span class="x-red">*</span>专业</label>
                <div class="layui-input-inline">
                    <input type="text" id="studentMajor" name="studentMajor" th:value="${student.studentMajor}"
                           required="required" lay-verify="studentMajor"
                           autocomplete="off"
                           class="layui-input"></div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="studentMobile" class="layui-form-label">
                    <span class="x-red">*</span>手机号</label>
                <div class="layui-input-inline">
                    <input type="text" id="studentMobile" name="studentMobile" th:value="${student.studentMobile}"
                           required="required" lay-verify="studentMobile"
                           autocomplete="off"
                           class="layui-input"></div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="studentEmail" class="layui-form-label">
                    <span class="x-red">*</span>邮箱</label>
                <div class="layui-input-inline">
                    <input type="text" id="studentEmail" name="studentEmail" th:value="${student.studentEmail}"
                           required="required" lay-verify="studentEmail"
                           autocomplete="off"
                           class="layui-input"></div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <button type="submit" class="layui-btn" lay-filter="add" lay-submit="">提交</button>
            </div>
        </form>
    </div>
</div>
<script>
    layui.use(['form', 'layer', 'jquery'],
        function () {
            $ = layui.jquery;
            var form = layui.form,
                layer = layui.layer;


            //自定义验证规则
            form.verify({
                account: function (value) {
                    if (value.length < 3) {
                        return '昵称至少得3个字符啊';
                    }
                },
                studentPwd: [/(.+){3,12}$/, '密码必须6到12位'],
                repass: function (value) {
                    if ($('#studentPwd').val() != $('#L_repass').val()) {
                        return '两次密码不一致';
                    }
                },
            });

            //监听提交
            form.on('submit(add)',
                function (data) {
                    //console.log(data);
                    $.ajax({
                        type: "post",
                        url: "http://localhost:9527/sysLab/student/studentEdit",
                        async: false,
                        dataType: 'json',
                        data: {
                            studentNo: data.field.studentNo,
                            studentPwd: data.field.studentPwd,
                            studentName: data.field.studentName,
                            imgUrl: data.field.imgUrl,
                            studentMajor: data.field.studentMajor,
                            studentCollege: data.field.studentCollege,
                            studentGrade: data.field.studentGrade,
                            studentMobile: data.field.studentMobile,
                            studentEmail: data.field.studentEmail
                        },
                        success: function (res) {
                            //console.log("======" + res.data);
                            if (res.data == "success") {
                                //console.log("enter ==>")
                                layer.alert("修改成功", {
                                        icon: 6
                                    },
                                    function () {
                                        //关闭当前frame
                                        xadmin.close();

                                        // 可以对父窗口进行刷新
                                        xadmin.father_reload();
                                    });
                            } else {
                                layer.alert("用户已存在！", {
                                    icon: 6
                                });
                            }
                        },
                        error: function (res) {
                            layer.alert("修改失败", {
                                icon: 6
                            });
                        }
                    })
                    return false;
                });
        });
</script>

<script>
    document.getElementById("file").addEventListener("change", function () {
        //console.log("change==>");
        /**
         * 图片上传 formdata进行数据传输！
         * @type {jQuery|HTMLElement}
         */
        $ = layui.jquery;

        var url = $("#file")[0].files[0];
        //console.log("==>"+url)
        var form = new FormData();
        form.set('file', url);

        $.ajax({
            type: "post",
            url: "http://localhost:9527/sysLab/student/fileUpload",
            async: false,
            dataType: 'json',
            processData: false,
            contentType: false,
            data: form,
            success: function (res) {
                //console.log("res==>"+res);
                if (res.data == "success") {
                    layer.alert("上传成功！", {
                        icon: 6
                    })
                    $('#imgUrl').val(res.fileUrl);
                } else {
                    layer.alert("服务出错，请联系管理员！", {
                        icon: 6
                    })
                }

            },
            error:function () {
                layer.alert("上传失败，请联系管理员！", {
                    icon: 6
                })
            }
        });

    });


</script>

</body>

</html>
